<template>
  <div class="main_box">
    <div class="flex_between">
      <n-card style="width: 40%;">
        <div class="flex_around" style="text-align: center">
          <div>
            <n-progress type="circle" status="success" style="width: 100px;height: 100px"
                        :percentage="parseInt((22690/50770)*100)">
              <span class="title_num">770</span>
            </n-progress>
            <p class="title_p">{{ t("control.todaySNews") }}</p>
          </div>
          <div>
            <n-progress type="circle" status="warning" style="width: 100px;height: 100px" :percentage="100">
              <span class="title_num_ms">3ms</span>
            </n-progress>
            <p style="font-size: 16px;margin-top: 15px">{{ t("control.averageConsumptionTime") }}</p>
          </div>
          <div>
            <n-progress type="circle" style="width: 100px;height: 100px" :percentage="100">
              <span class="title_num">50770</span>
            </n-progress>
            <p style="font-size: 16px;margin-top: 15px">{{ t("control.newsYesterday") }}</p>
          </div>
        </div>

      </n-card>
      <n-card style="width: 59%;">
        <div class="flex_around" style="text-align: center;">
          <div class="title_box2" style="border-bottom: 3px solid #0a7be2;color: #0a7be2;">
            <div class="title_num2" style="color: #0a7be2">2</div>
            <n-ellipsis style="font-size: 16px;padding-bottom: 10px;">{{ t("control.producer") }}</n-ellipsis>
          </div>
          <div class="title_box2" style="border-bottom: 3px solid #e56414;color: #e56414;">
            <div class="title_num2" style="color: #e56414">16</div>
            <n-ellipsis style="font-size: 16px;padding-bottom: 10px">{{ t("control.customer") }}</n-ellipsis>
          </div>
          <div class="title_box2" style="border-bottom: 3px solid #ffb300;color: #ffb300;">
            <div class="title_num2" style="color: #ffb300">7</div>
            <n-ellipsis style="font-size: 16px;padding-bottom: 10px">{{ t("control.subscribe") }}</n-ellipsis>
          </div>
          <div class="title_box2" style="border-bottom: 3px solid #03903e;color: #03903e;">
            <div class="title_num2" style="color: #03903e">75536</div>
            <n-ellipsis style="font-size: 16px;padding-bottom: 10px">{{ t("control.generalNews") }}</n-ellipsis>
          </div>
          <div class="title_box2" style="border-bottom: 3px solid #ca1510;color: #ca1510;">
            <div class="title_num2" style="color: #ca1510">8</div>
            <n-ellipsis style="font-size: 16px;padding-bottom: 10px">{{ t("control.queueNum") }}</n-ellipsis>
          </div>
        </div>
      </n-card>
    </div>
    <div class="flex_between" style="margin-top: 20px;">
      <div class="charts_box">
        <div id="main" style="width: 600px;height:550px;"></div>
      </div>
      <div class="charts_box" style="padding: 40px">
        <div id="main2" style="width: calc(100vw - 820px);height:550px;"></div>
      </div>
    </div>

  </div>
</template>

<script>
import {useI18n} from "vue-i18n"
import {defineComponent, ref, h, onMounted} from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: "Control",
  setup() {
    const {t} = useI18n()

    onMounted(() => {//需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("main"));
      // let myChart = echarts.init(document.getElementById("main"),"dark");
      // 绘制图表
      myChart.setOption({
        title: {text: t("control.day7")},
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [1742619, 2643847, 2971228, 2245918, 1923690, 2117712, 2515812],
          type: 'bar'
        }]
      });
      window.onresize = function () {//自适应大小
        myChart.resize();
      };
    })

    onMounted(() => {//需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("main2"));
      // 绘制图表
      myChart.setOption({
        title: {text: t("control.hour12")},
        xAxis: {
          type: 'category',
          data: ['13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '0:00', '1:00']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [57748, 32596, 77482, 129987, 67790, 33829, 77453, 82340, 39990, 54322, 12700, 7786, 9257],
          type: 'line',
        }]
      });
      window.onresize = function () {//自适应大小
        myChart.resize();
      };
    })
    return {
      t
    }
  }
})
</script>

<style lang="scss" scoped>
.main_box {
  background-color: var(--bg-contorl);
  min-height: calc(100vh - 120px);
  height: 100%;
  padding: 30px;
}

.title_num {
  font-size: 24px;
  color: var(--title-color);
  font-family: '黑体';
  font-weight: 600;
}

.title_num2 {
  margin: 0;
  padding: 0;
  font-size: 34px;
  color: var(--title-color);
  font-family: '黑体';
  font-weight: 600;
}

.title_num_ms {
  text-align: center;
  font-size: 22px
}

.title_p {
  font-size: 16px;
  margin-top: 15px
}

.title_box2 {
  margin-left: 20px;
  margin-right: 20px;
  height: 80px;
  margin-top: 30px;
  width: 110px;
  padding-bottom: 10px;
  flex: 1;
}

.charts_box {
  background-color: var(--echarts-bg);
  padding: 35px 35px 0 !important;
  border-radius: 5px;
  border: 1px solid var(--card-border-color);
}
</style>
